<script setup lang="ts">
import { ref, onMounted } from 'vue';
import List from './components/List.vue'
import axios from 'axios';
// 导入类型
 import type {ChannelItem, ChannelRes} from './types/data'
//导入store
import {useChannelStore} from './store/channelStore'
// 调用接口获取channelList

const channelList = ref<ChannelItem[]>([])
// axios获取后端数据 （axios.request<类型>   这个类型就是返回值的类型）
const getList = async () => {
  const res = await axios.request<ChannelRes>({
    url: 'http://geek.itheima.net/v1_0/channels',
    method: 'GET'
  })
  // 后端返回的数据就有提示了
channelList.value = res.data.data.channels

}


onMounted(() => {
  getList()
})

// 点击频道了
const store = useChannelStore()
// const channelId = ref(0)
const tabChange = (id: number) => {
  // channelId.value = id
  store.changeId(id)
}

</script>

<template>
  <!-- tab切换 -->
  <van-tabs @change="tabChange">
    <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
      <!-- 文章列表组件 -->
      <List />
    </van-tab>
  </van-tabs>

</template>


